<template>
  <div>
    <Card class="trackShow">
      <Row>
        <i-col>
          <h1 style="font-size:20px;" v-show="searchError">
            <Icon type="information-circled" color="red"></Icon>&nbsp;&nbsp;暂无沿途跟踪记路
          </h1>
          <h1 v-show="haveInfo"><span>{{startStationName}}</span>
          </h1>
          <h1 v-show="nohaveInfo">暂无沿途跟踪记录</h1>
          <Timeline>
            <template v-for="item in trackOpstion">
              <i class="time1" v-show="item.state === 10">预计:{{item.xchPickTimeInterval}}h</i>
              <i class="time1" v-show="item.state === 23">预计:{{item.xchLoadTimeInterval}}h</i>
              <i class="time1" v-show="item.state === 24">预计:{{item.xchOutLineTimeInterval}}h</i>
              <i class="time1" v-show="item.state === 30">预计:{{item.xchWaitDeliverTimeInterval}}h</i>
              <i class="time1" v-show="item.state === 40">预计:{{item.xchWaitSendTimeInterval}}h</i>
              <i class="time1" v-show="item.state === 41">预计:{{item.xchWaitUnloadTimeInterval}}h</i>
              <i class="time1" v-show="item.state === 42">{{item.xchUnloadTimeInterval}}</i>
              <i class="time1" v-show="item.state === 42">预计:{{item.xchUnloadTimeInterval}}</i>
              <i class="time1" v-show="item.state === 53">预计:{{item.xchOutStationTimeInterval}}h</i>
              <i class="time1" v-show="item.state === 60">预计:{{item.xchSendFinishTimeInterval}}h</i>
              <TimelineItem v-show="item.actionTime">{{item.actionTime}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.curPosition}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.stateName}}&nbsp;&nbsp;&nbsp;&nbsp;</TimelineItem>
              <i class="time2" v-show="item.state === 10 && item.pickTimeOut !== 0">超时:{{item.pickTimeOut}}h</i>
              <i class="time2" v-show="item.state === 23 && item.loadTimeOut !== 0">超时:{{item.loadTimeOut}}h</i>
              <i class="time2" v-show="item.state === 24 && item.outLineTimeOut !== 0">超时:{{item.outLineTimeOut}}h</i>
              <i class="time2" v-show="item.state === 30 && item.waitDeliverTimeOut !== 0">超时:{{item.waitDeliverTimeOut}}h</i>
              <i class="time2" v-show="item.state === 40 && item.waitSendTimeOut !== 0">超时:{{item.waitSendTimeOut}}h</i>
              <i class="time2" v-show="item.state === 41 && item.waitUnloadTimeOut !== 0">超时:{{item.waitUnloadTimeOut}}h</i>
              <i class="time2" v-show="item.state === 42 && item.unloadTimeOut !== 0">超时:{{item.unloadTimeOut}}h</i>
              <i class="time2" v-show="item.state === 53 && item.outStationTimeOut !== 0">超时:{{item.outStationTimeOut}}h</i>
              <i class="time2" v-show="item.state === 60 && item.sendFinishTimeOut !== 0">超时:{{item.sendFinishTimeOut}}h</i>
            </template>
          </Timeline>
        </i-col>
      </Row>
    </Card>
  </div>
</template>
<script>
  import {getDynamicList} from '@api/containerPlatform/containerManagement'
  import _ from 'lodash'

  export default {
    name: 'trackingCode',
    data () {
      let haveInfo = false
      let nohaveInfo = false
      let trackOpstion = []
      let startStationName = ''
      let trackStatusShow = 0
      let searchError = false
      let datas = {trackOpstion, startStationName, trackStatusShow, haveInfo, nohaveInfo, searchError}
      return datas
    },
    props: {
      subOrder: {
        type: Object,
        default () {
          return {}
        }
      },
      containerStateList: {
        type: Array,
        default () {
          return null
        }
      }
    },
    methods: {
      tranStateCN (state) {
        let stateList = _.find(this.containerStateList, {'id': state})
        let showData = ''
        if (stateList) {
          if (stateList.state) {
            showData = stateList.state
          }
        }
        return showData
      },
      trackingCodeSearch () {
        this.searchError = false
        this.haveInfo = false
        this.trackOpstion = []
        let containerId = this.subOrder.id
        let type = this.subOrder.type
        let curHisId = this.subOrder.curHisId
        let param = {containerId, type, curHisId}
        if (containerId) {
          getDynamicList(param).then(res => {
            if (+res.data.isSuccess !== 1) {
              this.searchError = true
            } else {
              this.haveInfo = true
              this.nohaveInfo = false
              let trackOpstion = res.data.data
              if (!trackOpstion || trackOpstion.length <= 0) {
                this.nohaveInfo = true
              } else {
                trackOpstion.sort(function (p1, p2) {
                  return new Date(p1.actionTime).getTime() - new Date(p2.actionTime).getTime()
                })
                this.trackOpstion = trackOpstion.reverse()
                this.startStationName = this.trackOpstion[0].curPosition
              }
            }
          })
        }
      }
    },
    mounted () {
      this.trackingCodeSearch()
    }
  }
</script>
<style>
  .trackShow .ivu-timeline-item-head {
    width: 8px;
    height: 8px;
    background-color: #ddd;
    top: 3px;
    left: 2px;
    border-color: #ddd;
  }

  .ivu-timeline li:first-child .ivu-timeline-item-head {
    width: 8px;
    height: 8px;
    background-color: #FECA2E;
    top: 3px;
    left: 2px;
    border-color: #FECA2E;
  }

  .trackShow .ivu-timeline-item-tail {
    top: 2px;
  }

  .trackShow .ivu-timeline-item-content {
    color: #878787;
  }

  .trackShow .ivu-timeline li:first-child .ivu-timeline-item-content {
    color: #E5B31D;
  }

  .trackShow .ivu-row {
    background-color: #FAFAF3;
    padding-top: 30px;
  }

  .trackShow .ivu-timeline {
    margin-left: 30px;
    width: 100%;
  }

  .trackShow h1 {
    margin-left: 30px;
    margin-bottom: 30px;
    font-size: 20px;
  }

  .trackShow span {
    color: #E5B31D;
  }

  .trackShow .ivu-steps {
    width: 960px;
    margin-top: 30px;
    margin-left: 60px;
  }
</style>
<style scoped>
  .info_bg {
    background-image: url("../../../../../static/img/img_homebg01.png");
    background-color: #FFFFFF;
    padding-bottom: 20px;
    padding-top: 80px;
  }

  .transportInfo {
    height: 100%;
    margin: 0 auto;
    width: 960px;
  }

  .trackCodeSraech {
    margin-top: 40px;
  }

  .trackCodeSraechBtn {
    margin-left: 10px;
    padding: 5px 15px;
    background-color: #FECA2E;
    border-color: #FFDB59;
  }

  .trackCodeSraechBtn:hover {
    color: #495060;
  }

  .trackStep {
    width: 900px;
    margin: 0 auto;
    height: 80px;
  }

  .trackLineBg {
    width: 900px;
    height: 25px;
  }

  .lightLine {
    float: left;
    width: 90px;
    height: 25px;
    border-bottom: 2px solid #f2f2f2;
  }

  .trackStep .active {
    border-bottom: 2px solid #50e3c2;
  }

  .trackStepContent {
    float: left;
    width: 90px;
    height: 80px;
    background-color: #fff;
  }

  .trackStepContentImgDiv {
    height: 50px;
    width: 90px;
    text-align: center;
  }

  .trackStepContentImgDiv img {
    height: 50px;
  }

  .trackStepState {
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #666;
  }

  .time1 {
    position: absolute;
    left: 15px;
    height: 20px;
    padding-top: 20px;
    color:rgb(35, 159, 255);
  }
  .time2 {
    position:absolute;
    color:red;
    left:350px;
    margin-top:-42px;
  }
</style>
